import React, { Component } from 'react';
import { Radio, Icon, Button } from 'antd';
import {Editor, EditorState, RichUtils} from 'draft-js';
import CustomRichEdit from '../../../../components/CustomRichEdit/CustomRichEdit';
import styles from './editTopic.less';

const TopicType = {
  // 选择题
  ChoiceQuestion: 0,
  // 填空题
  GapFilling: 1,
  // 简答题
  ShortAnswerQuestion: 2,
  // 概念题
  ConceptOfTopic: 3,
};

export default class EditTopic extends Component {
  constructor(props) {
    super(props);

    // const compositeDecorator = new CompositeDecorator([
    //   {
    //     strategy: handleStrategy,
    //     component: HandleSpan,
    //   },
    //   {
    //     strategy: hashtagStrategy,
    //     component: HashtagSpan,
    //   },
    // ]);

    this.state = {
      // 当前题目
      // currentTopicItem: undefined,
      // 题目类型
      topicTypeValue: undefined,
      // 选择题选中的 答案
      tempSelectAnswer: undefined,
      // 选择题答案列表
      choiceQuestionAnswers: [
      ],
    };

    this.topicType = [
      {
        name: '选择题',
        type: TopicType.ChoiceQuestion,
      },
      {
        name: '填空题',
        type: TopicType.GapFilling,
      },
      {
        name: '简答题',
        type: TopicType.ShortAnswerQuestion,
      },
      {
        name: '概念题',
        type: TopicType.ConceptOfTopic,
      },
    ];
  }

  /**
   * 题目类型改变
   */
  onTypeChange = e => {
    this.setState({
      topicTypeValue: e.target.value,
    });
  };

  /**
   * 选择题-选中的选项改变
   */
  onchoiceQuestionAnswersChange = e => {
    this.setState({
      tempSelectAnswer: e.target.value,
    });
  };

  /**
   * 选择题-添加题目选项
   */
  addChoiceQuestionAnswer = () => {
    const { choiceQuestionAnswers = [], tempSelectAnswer} = this.state;
    const answerId = String.fromCharCode(choiceQuestionAnswers.length + 97);
    choiceQuestionAnswers.push({
      name: answerId,
      value: EditorState.createEmpty(),
    });
    if (tempSelectAnswer === undefined) {
      this.setState({
        choiceQuestionAnswers,
        tempSelectAnswer: answerId,
      });
    }
    this.setState({
      choiceQuestionAnswers,
    });
  };

  /**
   * 选择题-获取选中的选项
   */
  getChoiceQuestionSelectItem() {
    const {tempSelectAnswer, choiceQuestionAnswers} = this.state;
    if (tempSelectAnswer) {
      // str.charCodeAt();
      const index = tempSelectAnswer.charCodeAt() - 97;
      const answer = choiceQuestionAnswers[index];
      return answer;
    }
    return undefined;
  };

  /**
   * 选择题-选项被编辑的时候
   */
  onEditorStateChangeChoiceQuestion = (e) => {
    const {tempSelectAnswer, choiceQuestionAnswers} = this.state;
    if (tempSelectAnswer) {
      // str.charCodeAt();
      const index = tempSelectAnswer.charCodeAt() - 97;
      choiceQuestionAnswers[index].value = e;
      this.setState({
        choiceQuestionAnswers
      })
    }
  }

  render() {
    return (
      <div className={styles.editBox}>
        <div className={styles.itemBox}>
          <div className={styles.title}>题目ID</div>
          <div className={styles.content}>content</div>
        </div>

        <div className={styles.itemBox}>
          <div className={styles.title}>题目类型</div>
          <div className={styles.content}>
            <Radio.Group onChange={this.onTypeChange} value={this.state.topicTypeValue}>
              {this.topicType.map(item => {
                return (
                  <Radio key={item.name} value={item.name}>
                    {item.name}
                  </Radio>
                );
              })}
            </Radio.Group>
          </div>
        </div>

        <div className={styles.itemBox}>
          <div className={styles.title}>题目内容</div>
          <div className={styles.content}>content</div>
        </div>

        <div className={styles.itemBox}>
          <div className={styles.title}>题目解析</div>
          <div className={styles.content}>content</div>
        </div>

        {/* 选择题特有 */}
        <div className={styles.itemBox}>
          <div className={styles.title}>答案选项</div>
          <div className={styles.content}>
            <div>
              <Radio.Group
                onChange={this.onchoiceQuestionAnswersChange}
                value={this.state.tempSelectAnswer}
              >
                {this.state.choiceQuestionAnswers.map((item, index) => {
                  return (
                    <Radio.Button key={index} value={item.name}>
                      {item.name}
                    </Radio.Button>
                  );
                })}
              </Radio.Group>
              <Button className={styles.addBtn} onClick={this.addChoiceQuestionAnswer}>
                <Icon type="plus-circle" />
              </Button>
            </div>
            {
              this.getChoiceQuestionSelectItem() && 
              <CustomRichEdit 
                editorState={this.getChoiceQuestionSelectItem().value}
                onEditorStateChange={this.onEditorStateChangeChoiceQuestion} />
            }
          </div>
        </div>

        <div className={styles.itemBox}>
          <div className={styles.title}>题目答案</div>
          <div className={styles.content}>content</div>
        </div>
      </div>
    );
  }
}
